<template>
    <div>
        <el-form :inline="true" :model="formInline" ref="ruleForm">
            <el-form-item label="岗位编码" prop="user">
                <el-input v-model="formInline.user" placeholder="岗位编码"></el-input>
            </el-form-item>
            <el-form-item label="岗位名称" prop="name">
                <el-input v-model="formInline.name" placeholder="岗位名称"></el-input>
            </el-form-item>
            <el-form-item label="岗位状态" prop="region">
                <el-select v-model="formInline.region" placeholder="岗位状态">
                <el-option label="正常" value="shanghai"></el-option>
                <el-option label="停用" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search">搜索</el-button>
                <el-button size="mini" icon="el-icon-refresh" @click="$refs.ruleForm.resetFields()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row style="margin-bottom:20px;">
            <el-col :span="24">
                <el-button size="mini"
                type="primary"
                class="el-icon-plus" 
                plain
                @click="$refs.PostAction.init(false)"
                >新增</el-button>

                <el-button size="mini" type="success"
                    icon="el-icon-edit" plain
                    :disabled="multipleSelection.length !== 1"
                    @click="$refs.PostAction.init(multipleSelection[0])"
                >
                    修改
                </el-button>
                <el-button size="mini" type="danger"
                    icon="el-icon-delete" plain
                    :disabled="multipleSelection.length === 0"
                    @click="delRow(false)"
                >
                    删除
                </el-button>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{ backgroundColor: '#b3d8ff', color: '#333', fontSize: '14px', borderColor: '#409EFF', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center'}">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="number"
                label="岗位编号">
            </el-table-column>
            <el-table-column
                prop="coding"
                label="岗位编码">
            </el-table-column>
            <el-table-column
                prop="name"
                label="岗位人员">
            </el-table-column>
            <el-table-column
                prop="sort"
                label="岗位排序">
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 1">正常</el-tag>
                    <el-tag v-else type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="creationTime"
                label="创建时间"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="$refs.PostAction.init(scope.row)">修改</el-button>
                    <el-button type="text" icon="el-icon-delete" @click="delRow(scope.$index,tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                background
                :page-sizes="[10]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="4">
            </el-pagination>
        </div>
        <post-action ref="PostAction" @getData="getData" />
    </div>
</template>

<script>
    import { formatDateTime } from '../utils/index'
    import PostAction  from '../components/PostAction'
    export default {
        name:"Post",
        components:{ PostAction },
        data() {
            return {
                coding: '',
                inputName: '',
                value: '',
                disabled: false,
                disabledDel: false,
                multipleSelection: [],
                currentPage4: 1,
                options: [{
                    value: '1',
                    label: '正常'
                },
                {
                    value: '2',
                    label: '停用'
                }],
                tableData: [{
                    number: '1',
                    coding: 'ceo',
                    name: '董事长',
                    sort:1,
                    state:'1',
                    creationTime: '时间',
                    operation: '修改'
                },{
                    number: '2',
                    coding: 'se',
                    name: '项目经理',
                    sort:2,
                    state:'1',
                    creationTime: '时间',
                    operation: '修改  '
                },{
                    number: '3',
                    coding: 'hr',
                    name: '人力资源',
                    sort:3,
                    state:'1',
                    creationTime: '时间',
                    operation: '修改  '
                },{
                    number: '4',
                    coding: 'user',
                    name: '普通员工',
                    sort:4,
                    state:'1',
                    creationTime: '时间',
                    operation: '修改  '
                }],
                formInline: {
                    user: '',
                    name: '',
                    region: ''
                },
                dialogVisible:true
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            delRow(index,rows) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(rows){
                        rows.splice(index, 1);
                    }else {
                        this.tableData = this.tableData.filter((item) => {
                            var o = this.multipleSelection.findIndex((item2) => {
                                return item.number == item2.number
                            })
                            console.log(o)
                            return o === -1
                        })
                    }
                    this.$message({
                    type: 'success',
                    message: '删除成功!',
                });
                }).catch(() => {});
            },
            // 数组去重
            quchong() {
                const arr = [1, 2, 3, 4, 5, 6, 1, 7, 4]
                const res = []
                
                for(var i = 0; i < arr.length; i++){
                    if(res.indexOf(arr[i]) == -1 ){
                        res.push(arr[i])
                    }
                }
                console.log(res)
            },
            // 接收子组件弹框  传来的数据
            getData(row) {
                const { number, coding, name, state, sort, desc } = row
                const creationTime = formatDateTime(new Date())
                if (number) {
                    // 修改数据
                    const idx = this.tableData.findIndex(e => e.number == number)
                    this.tableData[idx].name = name
                    this.tableData[idx].coding = coding
                    this.tableData[idx].state = state
                    this.tableData[idx].sort = sort
                    this.tableData[idx].desc = desc
                } else {
                    // 新增数据
                    const length = this.tableData.length - 1
                    const data = JSON.parse(JSON.stringify(row))
                    data.number = Number(this.tableData[length].number) + 1
                    data.creationTime = creationTime
                    this.tableData.push(data)
                }
            }
        }
    }
</script>

<style scoped>
    .block {
        margin-top: 20px;
        text-align: center;
    }
    ::v-deep .el-form-item__label {
        font-weight: bold;
    }
</style>